<template>
	<div style="overflow: auto; height: 100vh" v-show="isKeep">
		<div class="navBox">
			<van-nav-bar :border="false" fixed title="单词列表" left-arrow @click-left="onBack"></van-nav-bar>
		</div>
		<div class="tabBox">
			<van-tabs v-model:active="state.active" title-active-color="#0CB76C" title-inactive-color="#000"
				color="#0CB76C" @click-tab="onTab">
				<van-tab :title="item.name" :name="item.type" v-for="item in typeList" :key="item.type"></van-tab>
			</van-tabs>
		</div>
		<Mescroll v-bind="mescrollConfig" class="research-dev-demand-pool__scroll-container" :style="{
		    height: 'calc(100vh - 90px)',
		    position: 'fixed',
		    top: '90px',
		    bottom: 0,
		  }" @init="mescrollInited">
			<div class="wordList" v-if="state.wordList.length">
				<div v-if="state.active==1">
					<div v-if="userWordInfo" class="yes_count">单词数量{{userWordInfo.yes_count}}</div>
					<div v-for="(item, index) in state.wordList">
						<div class="dateBox">
							<div class="block"></div>
							<div class="date">{{item.date}}</div>
						</div>
						<div class="cu-list menu">
							<div class="cu-item arrow" :key="index" v-for="(wordItem, wordIndex) in item.wordsList"
								@click="onWord(wordItem.words_id,wordItem.versionId)">
								<div class="content">
									<div class="flex justify-between text-black">
										<span>{{ wordItem.words_name }}</span>
										<span style="font-size: 12px;color: #8E8E8E;">释义</span>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="cu-list menu " v-if="state.active==2">
					<div class="cu-item arrow" v-for="(item, index) in state.wordList" :key="index"
						@click="onWord(item.interpretationId,item.versionId)">
						<div class="content">
							<div class="flex justify-between text-black">
								<span>{{ item.wordName }}</span>
								<span style="font-size: 12px;color: #8E8E8E;">释义</span>
							</div>
						</div>
					</div>
				</div>
			</div>
			<van-empty v-else description="暂无数据"></van-empty>
		</Mescroll>
	</div>
	<wordDetail v-model="isKeep" v-show="!isKeep" :params="wordParams"></wordDetail>
</template>
<script setup>
	import {
		ref,
		toRefs,
		reactive,
		onMounted
	} from "vue";
	import {
		useRouter,
		useRoute
	} from "vue-router";
	import {
		request
	} from "@/api/request";
	import wordDetail from "./wordDetails.vue";
	import Mescroll from "mescroll.js/mescroll.vue";
	const router = useRouter();
	const route = useRoute();
	const isKeep = ref(true);
	const typeList = ref([{
			name: "已学单词",
			type: "1",
		},
		{
			name: "未学单词",
			type: "2",
		},
	]);
	const state = reactive({
		active: 1,
		wordParams: {},
		wordList: []
	})


	const mescrollInstance = ref(null)
	const mescrollInited = (mescroll) => {
		mescrollInstance.value = mescroll;
	};
	const mescrollConfig = reactive({
		down: {
			use: true,
		},
		up: {
			page: {
				num: 0, //当前页 默认0,回调之前会加1; 即callback(page)会从1开始
				size: 20 //每页数据条数,默认10
			},
			auto: true,
			isBounce: false,
			htmlNodata: '<p class="upwarp-nodata">-- 无更多数据 --</p>',
			callback: (page) => {
				getWordsList(page);
			},
		},
	})
	const userWordInfo = ref();
	const getUserData = () => {
		request({
			url: `https://d-xueer.bigchun.com/api/reciting/index`,
			method: 'get'
		}).then(res => {
			userWordInfo.value = res.data;
		})
	};
	const getWordsList = ({
		num,
		size
	}) => {
		request({
			url: `https://d-xueer.bigchun.com/api/reciting/studyOrNo`,
			method: 'get'
		}, {
			query: {
				page: num,
				limit: size,
				type: state.active,
			}
		}).then(res => {
			if (res.code == 1 && res.data) {
				const isNestPage = res.data.length < size;
				if (num === 1) {
					state.wordList = res.data;
				} else {
					state.wordList = state.wordList.concat(res.data);
				}

				mescrollInstance.value.endSuccess(state.wordList.length, !isNestPage);
			} else {
				throw res;
			}
		})
	};

	const onTab = (val) => {
		state.wordList = [];
		getWordsList({
			num: 1,
			size: 20
		})
	};
	const onWord = (wordId,versionId) => {
		state.wordParams = {
			words_id: wordId,
			version_id: versionId,
		};
		isKeep.value = false;
	};
	const onBack = () => {
		router.back();
	};
	onMounted(() => {
		getUserData()
	})
	const {
		active,
		wordList,
		wordParams,
	} = toRefs(state)
</script>

<style lang="scss" scoped>
	@import "./style/icon.scss";
	@import "./style/index.scss";
	@import "./style/main.scss";

	.yes_count {
		height: 28px;
		background: #F5F5F5;
		line-height: 28px;
		text-align: center;
		font-size: 12px;
	}

	.tabBox {
		position: fixed;
		top: 44px;
		z-index: 100;
		width: 100%;
	}

	:deep(.van-icon-arrow-left) {
		color: #000;
		font-size: 20px;
	}

	:deep(.van-nav-bar__title) {
		font-size: 18px;
		font-weight: 500;
		color: #000;
	}
	.dateBox {
		padding: 15px 20px;
		font-size: 12px;
		color: #8E8E8E;
		display: flex;
		align-items: center;

		.block {
			width: 4px;
			height: 10px;
			margin-right: 10px;
			background: #0CB76C;
		}
	}

	.word-count {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 28px;
		font-size: 14px;
		background-color: #f5f5f5;
		color: #000;

		.cu-list {
			padding: 90px !important;

		}
	}
</style>